<template>  
    <view class="container">  
		
		<view class="user-section">
			<image class="bg" src="/static/img/bg/user-bg.jpg"></image>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.portrait || '/static/img/bg/missing-face.png'"></image>
				</view>
				<view class="info-box">
					<text class="username">{{userInfo.nickname || '游客'}}</text>
				</view>
				<view class="coolc icon-erweima" @tap="showBanner"></view>
			</view>
			<view class="vip-card-box">
				<navigator class="b-btn" url="/pages/sellerAdmin/index" v-if="!userInfo.seller_id">商家管理</navigator>
				<view class="tit">
					<text class="coolc icon-zhubao"></text>
					<text class="level">黄金会员</text>
				</view>
				<text class="e-m">ID.201812220609</text>
			</view>
		</view>
		
		<view class="cover-container">
			<image class="arc" src="/static/img/bg/arc.png"></image>
			
			<view class="tj-sction">
				<view class="user_account circle-orange">
					<view class="coolc icon-rmb"></view>
					<text class="title">余额（元）</text>
					<text class="num">¥15,9900</text>
					<view class="btn_box">
						<navigator url="/pages/ucenter/withdraw" class="btn">明细</navigator>
					</view>
				</view>
				<view class="user_account circle-cyan">
					<view class="coolc icon-gift"></view>
					<navigator class="title">佣金收入（元）</navigator>
					<navigator class="num">¥15,9900</navigator>
					<view class="btn_box">
						<navigator url="/pages/ucenter/money" class="btnfill">提现</navigator>
						<navigator url="/pages/ucenter/commission_log" class="btn">明细</navigator>
					</view>
				</view>
			</view>
			
			<!-- 订单 -->
			<view class="order-section">
				<navigator class="order-item" url="/pages/ucenter/order_list">
					<text class="coolc zi_1 icon-tuanduicankaoxian-"></text>
					<text>全部订单</text>
				</navigator>
				<navigator class="order-item" url="/pages/ucenter/order_list">
					<view class="snum">19</view>
					<text class="coolc zi_1 icon-dingdandaifukuan"></text>
					<text>待付款</text>
				</navigator>
				<navigator class="order-item" url="/pages/ucenter/order_list">
					<view class="snum">2</view>
					<text class="coolc zi_2 icon-icon3"></text>
					<text>待收货</text>
				</navigator>
				<navigator class="order-item" url="/pages/ucenter/order_list">
					<text class="coolc zi_2 icon-shouhoutuikuan"></text>
					<text>退款/售后</text>
				</navigator>
			</view>
			
			<!-- 浏览足迹 -->
			<view class="history-section icon">
				<list-cell icon="icon-zuji" iconColor="#31a557" tips="查看全部" url="/pages/ucenter/history" padding="0px 15px" title="浏览足迹"></list-cell>
				<scroll-view scroll-x class="h-list">
					<navigator class="goods_user" url="/pages/goods/product">
						<img src="~@/static/por5.jpg"/>
						<view class="product-title">计时系列 5180/1G-010 机械男表</view>
						<view class="product-price">
							<text class="product-price-original">￥1780.00</text>
						</view>
					</navigator>
					<navigator class="goods_user" url="/pages/goods/product">
						<img src="~@/static/por6.jpg"/>
						<view class="product-title">计时系列 5180/1G-010 机械男表</view>
						<view class="product-price">
							<text class="product-price-original">￥1780.00</text>
						</view>
					</navigator>
					<navigator class="goods_user" url="/pages/goods/product">
						<img src="~@/static/por5.jpg"/>
						<view class="product-title">计时系列 5180/1G-010 机械男表</view>
						<view class="product-price">
							<text class="product-price-original">￥1780.00</text>
						</view>
					</navigator>
					<navigator class="goods_user" url="/pages/goods/product">
						<img src="~@/static/por6.jpg"/>
						<view class="product-title">计时系列 5180/1G-010 机械男表</view>
						<view class="product-price">
							<text class="product-price-original">￥1780.00</text>
						</view>
					</navigator>
				</scroll-view>
				<list-cell icon="icon-tixian" iconColor="#e07472" title="我的钱包" tips="您的收入提现明细" url="/pages/ucenter/account"></list-cell>
				<list-cell icon="icon-comment" iconColor="#5fcda2" title="地址管理" url="/pages/ucenter/address"></list-cell>
				<list-cell icon="icon-fenxiang" iconColor="#9789f7" title="我的推广" tips="邀请好友赢10万大礼" url="/pages/ucenter/commission"></list-cell>
				<list-cell icon="icon-youhuiquan" iconColor="#ee883b" title="我的优惠券" url="/pages/ucenter/coupon"></list-cell>
				<list-cell icon="icon-collection" iconColor="#54b4ef" title="我的收藏" url="/pages/ucenter/collection"></list-cell>
				<list-cell icon="icon-bank" iconColor="#b39369" title="我的银行卡" url="/pages/ucenter/bank"></list-cell>
				<list-cell icon="icon-xin" iconColor="#e07472" title="关注的品牌" url="/pages/ucenter/follow"></list-cell>
				<list-cell icon="icon-9" iconColor="#1e78ff" title="帐户安全" url="/pages/ucenter/safe"></list-cell>
				<list-cell icon="icon-shezhi" iconColor="#680000" title="设置" fontsize="42upx" url="/pages/ucenter/set"></list-cell>
			</view>
		</view>
		
		<!-- 弹出层 -->
		<view class="banner" v-if="showqrcode">
			<view class="flexend" @tap="closeBanner"><span class="coolc icon-cuohao"></span></view>
			<view class="img"><img src="~@/static/qrcode.png"/></view>
			<view class="btn_boxs">
				<view class="circle-noshadow-green">保存图片到手机</view>
			</view>
		</view>
		<view class="mask" v-if="showqrcode" @tap="closeBanner"></view>
		<!-- 弹出层 -->
    </view> 
</template>  
<script>  
	import listCell from '@/components/user-cell';
    import {  
        mapState 
    } from 'vuex';  
    export default {
		components: {
			listCell
		},
		data(){
			return {
				showqrcode:false
			}
		},
        onBackPress() {
        	if (this.showqrcode) {
        		this.showqrcode = false;
        		return true;
        	}
        },
		onLoad(){
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/ucenter/set');
			}
			if (index === 1) {
				this.navTo('/pages/ucenter/mail');
			}
		},
		// #endif
        computed: {
			...mapState(['hasLogin','userInfo'])
		},
        methods: {
			//链接跳转
			navTo(url){
				if(!this.hasLogin){
					url = '/pages/simple/login';
				}
				uni.reLaunch({  
					url
				})  
			}, 
            closeBanner: function() {
                this.showqrcode = false;
            },
            showBanner: function() {
                this.showqrcode = true;
            },
		}
    }  
</script>  
<style lang='scss'>
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 10upx;
	}
	.tj-sction { 
		width:690upx;
		height:auto;
		display: table; padding-top:5px; padding-bottom:5px;
		
		.user_account { width:336upx; height:210upx; padding-top:20upx; float:left; border-radius:10upx; padding-left:90upx; position:relative; }
		.user_account .coolc { width:50upx; height:50upx; line-height:50upx; font-size:32upx; color:#f19400; left:20upx; top:20upx; text-align:center; position:absolute; border-radius:50upx; background:rgba(255,255,255,.4); }
		.user_account .title { width:100%; height:50upx; line-height:50upx; display:block; font-size:28upx; }
		.user_account .num { width:100%; height:60upx; line-height:60upx; display:block; font-size:38upx; font-weight:bold; }
		.user_account .btn_box { width:100%; height:53upx; display:block; padding-top:8upx; }
		.user_account .btn_box .btnfill { height:46upx; line-height:46upx; border-radius:46upx; padding:0 25upx; display:block; float:left; margin-right:10upx; font-size:24upx; background:#ffffff; color:#f19400; }
		.user_account .btn_box .btn { height:46upx; line-height:44upx; border-radius:46upx; border:1px solid #ffffff; padding:0 25upx; display:block; float:left; margin-right:10upx; font-size:24upx; color:#ffffff; }
		.circle-cyan { float:right; }
		.circle-cyan .coolc { color:#2496d8; font-size:28upx; }
		.circle-cyan .btn_box .btnfill { color:#2496d8; }
	}
	.user-section{
		height: 520upx;
		padding:80upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}
	.user-info-box{
		height: 150upx;
		align-items:center;
		position:relative;
		z-index: 1;
		.portrait{
			width: 120upx;
			height:120upx; background:#ffffff;
			border:5upx solid #fff;
			border-radius:50%;
		}
		.username{ height:130upx; line-height:130upx; font-size:40upx; display:block; left:140upx; top:0px; position:absolute; }
		.coolc { width:60upx; height:130upx; line-height:130upx; font-size:50upx; text-align:center; display:block; right:0upx; top:0px; position:absolute; }
	}

	.vip-card-box{
		display:flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding:20upx 24upx;
		.card-bg{
			position:absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}
		.b-btn{
			position:absolute;
			right:20upx;
			top:20upx;
			width:132upx;
			height:46upx;
			text-align: center;
			line-height:46upx;
			font-size:22upx;
			color:#36343c;
			border-radius:26px;
			background:linear-gradient(left, #f9e6af, #ffd465);
			z-index:1;
		}
		.tit{
			font-size: $font-base+2upx;
			color: #f7d680;
			margin-bottom:6upx;
			.coolc{
				color: #f6e5a3; font-size:36upx; line-height:32upx;
				margin-right:10upx; display: block; float:left;
			}
			.level {
				font-size:24upx; display:block; float:left; line-height:32upx;
			}
		}
		.e-b{
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}
	.cover-container{
		background: $page-color-base;
		margin-top: -150upx;
		padding: 0 30upx;
		position:relative;
		background: #f5f5f5;
		padding-bottom: 20upx;
		.arc{
			position:absolute;
			left:0;
			top:-34upx;
			width:100%;
			height:36upx;
		}
	}
	.order-section{
		@extend %section;
		padding:20upx 0 32upx 0;
		margin-top:20upx;
		.order-item{
			@extend %flex-center;
			font-size: $font-sm;
			color: $font-color-dark; position:relative;
		}
		.snum { width:36upx; height:36upx; line-height:36upx; font-size:20upx; border-radius:36upx; right:-5upx; top:6upx; position:absolute; display:block; background:#b50048; color:#ffffff; text-align:center; }
		.coolc{ color:#999999; }
		.zi_1 { font-size:54upx; }
		.zi_2 { font-size:52upx!important; }
	}
	.history-section{
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius:10upx;
		.sec-header{
			display:flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;
			.coolc{
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}
		.h-list{
			white-space: nowrap;
			padding:10upx 30upx 0;
			.goods_user{
				display: inline-block;
				width:260upx;
				height:auto; border:1px solid #eee; border-radius:5px; overflow: hidden;
				margin-right:20upx;  padding-bottom:18upx;
			}
			.goods_user:nth-last-child(1) { margin-right:0upx; }
			
			.goods_user img { width:260upx; height:260upx; }
			.goods_user .product-title { width:220upx; color:#666666; display:block; margin:0 auto; font-size:24upx; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
			.goods_user .product-price { margin-top:0px; padding:0 20upx; color:$vui_bgcolor; }
		}
	}
</style>